<template>

  <div class="deposit_bar">
    <img src="/assets/images/deposit1.png" alt="">
    <div class="deposit_bar__content">公告：未满18岁的未成年人请勿消费</div>
  </div>
  <div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="">
    <div class="deposit_bar_large__title">
      <span>账户余额：￥ {{ business.money }}</span>
    </div>
  </div>
  <div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="">
    <div class="deposit_bar_large__title">
      <span>用户：{{ business.nickname }}</span>
    </div>
  </div>

  <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">分割线</van-divider>

  <van-form class="form" @submit="submit">
    <van-field 
        v-model="money"
        label="充值金额"
        name="money"
        placeholder="请填写充值金额"
        left-icon="gold-coin-o"
        required
        :rules="[{ required: true, message: '请填写充值金额' }]"
    />
    <!-- 支付方式 -->
    <van-cell title="支付方式" name="pay" :value="PayActive.text" is-link @click="PayShow = true"></van-cell>
    <div class="button">
      <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">立即充值</van-button>
    </div>
  </van-form>
    <!-- 支付弹出框 -->
    <van-popup
      v-model:show="PayShow"
      position="bottom"
      >
        <!-- 选择器 -->
        <van-picker
          title="请选择支付方式"
          :columns="PayList"
          @cancel="PayShow = false"
          @confirm="PayConfirm"
        />
    </van-popup>
  <van-number-keyboard @input="PayInput" :show="true" close-button-text="完成" />

  <Tabbar />
</template>

<script setup>
  const {proxy} = getCurrentInstance()
  //支付
  let PayShow = ref(false);
  let PayActive = ref({
    text:'微信支付',value:'wx'
  })
  let PayList = ref([
    {
      text:'微信支付',value:'wx'
    },
    {
      text:'支付宝支付',value:'zfb'
    }
  ])


  //拿busid 去查客户的名称 和 余额
  let busid = proxy.$business.value.id;
  let business = ref({})
  let money = ref(0)
  onMounted(()=>{
    PayInfo()
  })
  const PayInfo  = async ()=>{
      //发送请求
      var result = await proxy.$POST({
        url:'/business/payInfo',
        params:{busid:busid},
      })
      if(result.code == 0){
        proxy.$fail({
          message:result.msg,
          duration:500,
          onClose:()=>proxy.$router.go(-1)
        })
      }
      business.value = result.data;
  }
    //支付弹框
  const PayConfirm = ({selectedOptions}) => {
      PayShow.value = false;
      PayActive.value.value =  selectedOptions[0].value
      PayActive.value.text =  selectedOptions[0].text
  }; 
  const submit = async (val)=>{
      //充值价钱 val 充值的方式 PayActive.value.value
      var params = {
          pay:PayActive.value.value,
          money:val.money,
          busid:busid
      }
      var result = await proxy.$POST({
        url:'/business/pay',
        params
      })
      if(result.code == 0){
        proxy.$fail(result.msg);
        return false
      }
      proxy.$success({
        message:result.msg,
        onClose:()=>proxy.$router.push({path:result.url,query:{payid: result.data.id}})
      })
  }

  const PayInput = (values) =>money.value += `${values}`
</script>

<style scoped>
  @import url('/assets/css/BusinessPay.css');
</style>